<template>
    <el-drawer v-model="props.bindDeviceVisible" size="1200" :before-close="handleClose" class="signal-drawer">
        <template #header>
            <div class="signal-header">
                <h4>绑定设备</h4>
                <el-button class="mt20" type="primary" @click="addDomain">新增</el-button>
            </div>
        </template>
        <template #default>
            <el-form ref="formRef" :inline="true" :model="dynamicValidateForm" label-width="80px">
                <div class="bindDevice-card mb10" v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="分类名称" :prop="'domains.' + index + '.category'" :rules="[{
                                required: true,
                                message: '请选择分类名称',
                                trigger: 'change',
                            }]">
                                <el-select style="width: 176px;" v-model="domain.category">
                                    <el-option label="源" value="0" />
                                    <el-option label="储" value="1" />
                                    <el-option label="荷" value="2" />
                                    <!-- <el-option label="电网参数" value="3" />
                            <el-option label="发电机组" value="4" />
                            <el-option label="负荷监测" value="5" />
                            <el-option label="储能设备" value="6" />
                            <el-option label="太阳能光伏" value="7" />
                            <el-option label="风力发电" value="8" />
                            <el-option label="逆变器监测" value="9" />
                            <el-option label="电表" value="10" /> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">

                            <el-form-item label="设备名称" :prop="'domains.' + index + '.deviceName'" :rules="[{
                                required: true,
                                message: '请选择设备名称',
                                trigger: 'change',
                            }]">
                                <el-select style="width: 176px;" v-model="domain.deviceName">
                                    <el-option label="1号电表" value="0" />
                                    <el-option label="2号逆变器" value="1" />
                                    <el-option label="3号电表" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="设备厂家" :prop="'domains.' + index + '.manufacturer'" :rules="[{
                                required: true,
                                message: '请输入设备厂家',
                                trigger: 'blur',
                            }]">
                                <el-input v-model="domain.manufacturer" placeholder="请输入设备厂家" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="设备型号" :prop="'domains.' + index + '.model'" :rules="[{
                                required: true,
                                message: '请输入设备型号',
                                trigger: 'blur',
                            }]">
                                <el-input v-model="domain.model" placeholder="请输入设备型号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="设备地址" :prop="'domains.' + index + '.deviceCode'" :rules="[{
                                required: true,
                                message: '请输入设备地址',
                                trigger: 'blur',
                            }]">
                                <el-input v-model="domain.deviceCode" placeholder="请输入设备地址" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-button type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>

        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="submitForm(formRef)">保 存</el-button>
                <el-button @click="handleClose"> 取 消</el-button>
                <!-- <el-button @click="resetForm(formRef)"></el-button> -->
            </div>
        </template>

    </el-drawer>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
// 定义接收的属性类型
const props = defineProps({
    bindDeviceVisible: {
        type: Boolean,
        required: true
    }
});
// 定义自定义事件类型
const emits = defineEmits(['closeBindDevice']);
const handleClose = () => {
    emits('closeBindDevice', false)
    console.log('emitsemits')
}
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{ domains: DomainItem[] }>({
    domains: [
        {
            key: 1,
            category: '',
            manufacturer: '',
            deviceName: '',
            model: '',
            deviceCode: '',
            assetCode: '',
            deviceAddress: '',
        },
    ],
    // email: '',
})

interface DomainItem {
    key: number;
    category: string;
    deviceName: string;
    model: string;
    manufacturer: string;
    deviceCode: string;
    assetCode: string;
    deviceAddress: string;

}
function validateCode(rule: any, value: string, callback: any) {
    if (!/^\d+$/.test(value)) {
        callback(new Error('信号编码必须为数字'));
    } else {
        callback();
    }
}
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.domains.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}

const addDomain = () => {
    dynamicValidateForm.domains.push({
        key: Date.now(),
        category: '',
        deviceName: '',
        model: '',
        manufacturer: '',
        deviceCode: '',
        assetCode: '',
        deviceAddress: '',
    })
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>


<style lang="scss"></style>